VSCodeの秘伝のワザを大公開！
こんにちは！CX事業本部の片岡です。
エディタ戦争が終息して5年たった今、無血革命と呼ばれたVisual Studio Codeをご存知でしょうか？皆様ご愛用のことと存じます。
そんなVisual Studio Codeの便利なショートカットと拡張機能を紹介します！
よく使うショートカットの紹介
拡張機能「Sublime Text Keymap and Settings Importer」をインストール前提の話です。
https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings
編集時によく使うショートカット
文字選択
Command + D：文字を選択（入力するたび選択中の文字を複数選択できます）Command + U：文字選択のUndo（選択前に一つ戻ります）Command + K → Command + D：文字選択をスキップCommand + Control + G：選択中の文字と一致するものを全て選択
行の選択・操作
Command + L：行を範囲選択Command + Shift + D：選択中の行を複製Command + Shift + K：選択中の行を削除Command + Control + G：選択中の文字を全て選択Option + ↓ or ↑：選択中の行を上下に移動Command + Option + ↓ or ↑：矩形選択Command + Shift + L：選択中の行を矩形選択
HTMLの編集におすすめ
HTMLの編集って地味に面倒ですよね・・・そんな時に下記のショートカットを設定しておくと便利です！
Pugを使っているから関係ない？今はそういう話をしていないんだ！
選択しているタグを含む範囲選択
コマンドID editor.emmet.action.balanceOut をショートカットに登録します。
自分はCommand + Option + Aに割り当てています。
選択しているタグ内のテキストを範囲選択
コマンドID editor.emmet.action.balanceIn をショートカットに登録します。
自分はCommand + Shift + Aに割り当てています。
改行タグの挿入
Shift + Enterで改行タグを挿入できるようにしています。
[
{
"key": "shift+cmd+a",
"command": "editor.emmet.action.balanceIn"
},
{
"key": "alt+cmd+a",
"command": "editor.emmet.action.balanceOut"
},
{
"key": "shift+enter",
"command": "type",
"args": {
"text": "<br />"
},
"when": "editorTextFocus && editorLangId == 'html'"
}
]
上記の３つのショートカットです。keybindings.jsonに追記すると使えるようになります。
おすすめの拡張機能の紹介
Docker
Dockerを使う人ならぜひ入れてみてください！Dockerの色々がGUIでできます！
コンテナのログが見れて、Shellに入れて、起動・停止ができます。
イメージ等の操作もGUIできるのでよき！
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker
Settings Sync
VSCodeの設定や拡張機能の情報をGitHubのGistにアップロード・ダウンロードし、異なるVSCode間で設定を同期してくる拡張機能です。
自分みたいに今日の気分によって持ち歩くMacBook Proを変えるタイプの人にはもってこいな代物です。嘘ですちょっと盛りました。
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
Power Mode
文字を打つと花火があがります！
これを入れていると「何これー！すごーい！♥」と女子ウケ抜群ですモテます。マジで。
https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode
Prettier
とあるヒットソングみたいな名前の拡張機能で、ソースコードをとにかく綺麗にしてくれます。
インデントの乱れは心の乱れなので積極的に直していきましょう。HTML・CSS・JavaScript・JSON等に使えます！
グッバイ それじゃこのコードは何？
汚くて読めない 分かりたくもないのさ
たったひとつできることがあるとするのならば
「君は綺麗だ」
― ♪ Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Bookmarks
ブックマークを追加して行き来できる拡張機能です。肥大化したモンスター級のReact Componentを編集する時に便利です（白目）
Command + Option + K：Bookmarkの追加 / 削除Command + Option + J：前のBookmarkへ移動Command + Option + L：次のBookmarkへ移動
実は範囲選択をBookmarkできるので、検索と組み合わせるとすごい技を繰り出せます。
例えば大量に複製した要素のID属性を変更したい場合、
- 正規表現
id="[^"]*で検索 - 全て範囲選択
- Bookmark追加
- 次のBookmarkへ → 修正のループ
というウルコンがあります。
https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
GitLens
ソースコードの行ごとにgit blameしてくれる拡張機能です。他にも差分表示等色々見やすくなる機能も満載なので入れて損はないです！
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Git Graph
SourceTreeみたいにGUIでブランチを見れる拡張機能です。
余談ですが、交通事故で多いのは自宅から遠方よりも自宅の近辺で起こることが多いそうです。何が言いたいかというと、最後の最後で気が緩んで事故らないよう、ソースコードを触った後で消耗してる時でも脳死で見れるGUIに頼るのはありだと思います！
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
htmltagwrap
範囲選択したものをタグで優しく包んでくれる拡張機能です。React派もVue派も優しく包んでくれます。
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
Path Intellisense
入れたらわかるすっごいやつや！
ワークスペース内のパスをIntellisenseで補完してくれる超便利な拡張機能です。
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Document This
JSDocの構文を自動挿入してくれる拡張機能です。
コメントがきちんと書けるマメな男はやっぱりモテます。マジで。
https://marketplace.visualstudio.com/items?itemName=joelday.docthis
ESLint
プロジェクトにESLintが導入されている場合、エラーがあると教えてくれる拡張機能です。
プロジェクトによって「セミコロンつけろ！！」って怒られたり「セミコロンつけるな！！」って怒られたりするのでしょんぼりします。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Jest
Jestのテストコード書いている時にテストの状況を教えてくれる素敵な拡張機能です。上の画像はテストが通った時の画像です。
テストが通らなければバツ印がついて、通らなかった行に波線がつきます。この波線の行にマウスホバーすると詳しい内容を教えてくれます。
https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
Jest Runner
Jestのテストを一つだけ実行したい時におすすめの拡張機能です。
それだけではなく、テスト内容をデバッグすることができます！どうしてもテストコードってデバッグしづらいのでステップ実行できるととても助かります！
テスト駆動開発？僕、創造神なんで。
https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner
最後に
まだまだ紹介したいショートカットや拡張機能がありますが、このへんでおしまいにします。
もっと便利なのがあるぜ！って人はお便りお待ちしております！
みんなも使ってみてくれるかな？
＼いいともー！／
